<template>
	
	
	<h3>草稿箱</h3>
	<el-divider />
	
	<el-table :data="draft"
	          :default-sort="{ prop: 'time', order: 'descending' }" 
			  stripe 
			  border 
			  style="width: 100%">
		<el-table-column type="selection" width="55" />
	    <el-table-column prop="recipient" label="收件人" width="100" />
	    <el-table-column prop="title" label="主题" width="250" />
	    <el-table-column prop="time" label="草稿修改时间" />
		<el-table-column>
			<template #default="scope">
				<el-button @click="openUpdate(scope.row)">
			        <el-icon><EditPen /></el-icon>
			    </el-button>
			</template>
			
		</el-table-column>
	  </el-table>
	  
	  
	  <!-- 修改草稿对话框 -->
	  <el-dialog v-model="updateDialogFormVisble" title="编辑草稿">
		  <el-form
		  :label-position="labelPosition"
		  label-width="100px"
		  style="max-width: 350px;margin: 0px auto;"
		  >
		  <el-form-item label="收信人:">
			  <el-select v-model="updateDraft.recipient" class="m-2" placeholder="选择收信人" size="large">
			      <el-option
			        v-for="c in contacter" :value="c.name+'<'+c.email+'>'"
			      />
			    </el-select>
		  </el-form-item>
		  <el-form-item label="主题:">
			  <el-input v-model="updateDraft.title"></el-input>
		  </el-form-item>
		  <el-form-item label="正文:">
			  <el-input
			      v-model="updateDraft.main"
			      :autosize="{ minRows: 10, maxRows: 100 }"
			      type="textarea"
			    />
		  </el-form-item>
		      <el-button @click="close">取消</el-button>
			  <el-button @click="sendSuccess">发送</el-button>
			  <el-button @click="saveUpdate">确认修改</el-button>
			  
			  
		  </el-form>
		  
	  </el-dialog>
	
	
</template>

<script>
	import { ElMessage } from 'element-plus'
	import qs from 'qs'
	export default {
		data(){
			return{
				updateDialogFormVisble:false,
				contacter:[],
				draft:[],
				updateDraft:{}
			}
		},
		methods:{
			getSQL(){
				let that=this
				this.$axios.get("http://localhost:8080/draft/list").then(function(res){
						that.draft=res.data
					})
			},
			close(){
			    this.updateDialogFormVisble=false
			    this.getSQL()	
			},
			saveUpdate(){
				if(this.updateDraft.recipient==null||this.updateDraft.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.updateDraft.title==null||this.updateDraft.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				this.updateDraft.time=null
				let that=this
				let str=qs.stringify(that.updateDraft)
				this.$axios.get("http://localhost:8080/draft/update?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '修改成功！',
						    type: 'success',
						  })
						  that.updateDialogFormVisble=false
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('修改失败！')
					}
					})
					}
			},
			openUpdate(row){
				this.updateDraft=row
				this.updateDialogFormVisble=true
				
			},
			sendSuccess(){
				if(this.updateDraft.recipient==null||this.updateDraft.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.updateDraft.title==null||this.updateDraft.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				this.updateDraft.time=null
				let that=this
				let str=qs.stringify(that.updateDraft)
				this.$axios.get("http://localhost:8080/write/insert?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '发送成功！',
						    type: 'success',
						  })
						  that.updateDialogFormVisble=false
						  that.getSQL()
						  
					}
					else{
						ElMessage.error('发送失败！')
					}
					})
					}
					this.updateDialogFormVisble=false
					this.getSQL()
			}
			
		},
		created(){
			this.getSQL()
			let that=this
			this.$axios.get("http://localhost:8080/write/contact").then(function(res){
					that.contacter=res.data
				})
		}
	}
</script>

<style>
	
	h3 {
		text-align: left;
		margin-top:0px;
		
	}
</style>
